<template>
    <div class="course">
        <Header></Header>
        <Swiper :swiper-img-list="swiperImgList"></Swiper>
        <div class="content-main">
            <div class="container">
                <div class="category">
                    <div class="left-title">
                        <p>分类:</p>
                    </div>
                    <div class="right-category-list">
                        <CategoryList :category-list="categoryList" :selectedKey="selectedKey"></CategoryList>
                    </div>
                </div>
                <div class="data-nav">
                    <div class="nav-item selected">
                        <p>最新</p>
                    </div>
                    <div class="nav-item">
                        <p>最热</p>
                    </div>
                    <div class="nav-item">
                        <p>推荐</p>
                    </div>
                </div>
                <div class="course-list">
                    <Card v-for=" in 16"></Card>
                </div>
                <div class="page-control">
                    <el-pagination layout="prev, pager, next" :total="50" />
                </div>
            </div>
            <div class="banner">
                <img src="../../assets/image/banner.png" style="transform: scale(0.8); opacity: 0.7" />
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script setup lang="ts">
import Swiper, { SwiperImgData } from "@/components/course/Swiper.vue";
import Card from "@/components/course/Card.vue";
import CategoryList, { TCategoryList } from "@/components/course/CategoryList.vue";
import { ref } from "vue";

const categoryList: TCategoryList[] = [
    {
        title: "全部",
    },
    {
        title: "免费课程",
    },
    {
        title: "英语竞赛",
    },
    {
        title: "保研",
    },
    {
        title: "英语四六级",
    },
    {
        title: "数学",
    },
    {
        title: "程序设计",
    },
    {
        title: "论文发表",
    },
    {
        title: "数据分析",
    },
    {
        title: "就业实习",
    },
    {
        title: "考研课程",
    },
    {
        title: "京东方大赛",
    },
];
const selectedKey = ref("全部");
const swiperImgList: SwiperImgData[] = [
    {
        url: "https://edu.saikr.com/files/system/2019/11-28/202523300e3d725232.jpg?1.2.19",
    },
    {
        url: "https://edu.saikr.com/files/system/2019/11-28/202607f13fb0338941.jpg?1.2.19",
    },
];
</script>

<style lang="scss" scoped>
.container {
    width: 1080px;
}

.course {
    .content-main {
        padding: 30px 0;

        .container {
            .category {
                border: 1px solid #eaeaea;
                padding: 20px;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;

                .left-title {
                    font-size: 13px;
                    color: #666;
                    flex-basis: 4%;
                    margin-top: 10px;
                }
            }

            .data-nav {
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                border-bottom: 1px solid #eaeaea;
                cursor: pointer;

                .nav-item {
                    position: relative;
                    font-size: 14px;
                    padding: 15px 0;
                    color: #666;
                    margin-right: 20px;
                    @include Hover($main-color, color);
                }

                .selected {
                    font-size: 16px;
                    color: #000;
                    font-weight: bold;
                }

                .selected::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background: $main-color;
                    border-radius: 5px;
                }
            }

            .course-list {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;

                > * {
                    flex-basis: 23%;
                    margin-top: 20px;
                    margin-right: 20px;
                }
            }

            .page-control {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 50px;

                :deep(.el-pager li.is-active) {
                    background: $main-color;
                    color: #fff;
                }
            }
        }

        .banner {
            padding: 50px 0;

            :deep(.el-image) {
                height: 238px;
            }
        }
    }
}
</style>
